<script setup>
import { computed, ref, onBeforeMount,watch} from "vue";
import nodeMixin from "../NodeMixin.js";
const props = defineProps({
  ...nodeMixin.props,
  processData:{
    type: Array,
    default: () => {
      return []
    }
  },
  nodeConfVisible:{
    type:Boolean,
    default:true
  }
})
const options=ref({
  isCustomOperator: [//是否自选操作人员
    {
      label: '否',
      value: '0',
    },
    {
      label: '是',
      value: '1',
    },
  ],
  nodeCategory: [//节点分类
    {
      label: '保前',
      value: '1',
    },
    {
      label: '保后',
      value: '2',
    },
  ],
  triggerType:[
  {
      label: '跳转',
      value: '1',
    },
    {
      label: '暂停',
      value: '2',
    },
  ],
  jumpNodeCode:[],
})
const fields=ref([
{
    label: "节点名称",
    prop: 'name',
    placeholder: '请输入',
    type: 'input',

  },
  {
    label: "节点分类",
    prop: 'nodeCategory',
    placeholder: '请输入',
    type: 'radio',
  },
  {
    label: "触发器类型",
    prop: 'triggerType',
    placeholder: '请输入',
    type: 'radio',
  },
  {
    label: "跳转节点",
    prop: 'jumpNodeCode',
    placeholder: '请选择',
    type: 'select',
    bindLabel: 'name',
    bindValue: 'id',
    disabled:false,
    filterable:true,
  },
])
const rules=ref({
  name: [
    { required: true, message: '请输入节点名称', trigger: 'blur' },
  ],
  nodeCategory: [
    { required: true, message: '请选择节点分类', trigger: 'change' },
  ],
  triggerType: [
    { required: true, message: '请选择触发器类型', trigger: 'change' },
  ],
  jumpNodeCode: [
    { required: false, message: '请选择跳转节点', trigger: 'change' },
  ],
})
function handleProps(arr){
  arr.map(item=>{
    if(item.name!='网关节点'&&item.name!='业务进件'){
      if(item.props){
        options.value.jumpNodeCode.push({id:item.id,name:item.props.name})
      }
    }
   if(item.props){
    if(item.props.branch){
      handleProps(item.props.branch) 
    }
   }
    if(item.branch){
      if(item.branch.length>0){
       item.branch.map(item1=>{
        if(item1.length>0){
          handleProps(item1) 
        }
       })
      }
    }
  })
 }
onBeforeMount(() => {
  handleProps(props.processData)
  handleSelect('triggerType')
})
const emit = defineEmits(nodeMixin.emits)
const _value = computed(nodeMixin.computed._value(props, emit))
const form=ref()
const orgPicker = ref()
const orgPickerType = ref('org')
//选中的组织架构属性
const selectedOrg = ref([])
function showOrgPicker(orgs, type) {
  orgPickerType.value = type
  selectedOrg.value = orgs
  orgPicker.value.open()
}

function handleSelect(prop){
  if(prop=='triggerType'){
  if(_value.value.props.triggerType=='1'){
    fields.value[3].disabled=false
  }else{
    _value.value.props.jumpNodeCode=''
    fields.value[3].disabled=true
  }
  }

}
function save(){
  form.value.verification().then(res=>{
    emit('close')
  })
}
watch(() => props.nodeConfVisible, (newValue, oldValue) => {
  // 当isActive变化时，更新localIsActive的值
  if(newValue){
    handleProps(props.processData)
    handleSelect('triggerType')
  }else{
    options.value.jumpNodeCode=[]
  }
});
</script>

<template>
  <div class="Approval">
   <div class="form_drawer">
    <myform :fields="fields" ref="form" @handleSelect="handleSelect" :model="_value.props" :rules="rules" labelPosition="top" :inline="false"
      :options="options">
    </myform>
   </div>
    <div class="d_f j_c_c">
        <el-button type="primary" @click="save" >保 存</el-button>
     </div>
  </div>
</template>

<style lang="scss">
.Approval {
  height: 100%;
  .el-input,
  .el-select {
    width: 100% !important;
  }

  .box {
    background: rgba(24, 120, 255, 0.02);
    width: 100%;
    padding: 10px;
   .label::before{
    color: #f56c6c;
    content: "*";
    margin-right: 4px;
   }
    .el-input,
    .el-select {
      width: 45% !important;
      height: 32px !important;
    }
  }
  .form_drawer{
    height: calc(100% - 70px);
    overflow-y: auto;
  }
}
</style>
